<template>
  <el-container>
    <el-header v-if="detailStatus">
      <el-form ref="queryData" :model="queryData" inline size="mini" style="height: 30px;">
        <el-form-item prop="nickname">
          <el-input v-model="queryData.nickname" placeholder="会员昵称" style="width: 120px;" />
        </el-form-item>
        <el-form-item prop="merchantCode">
          <el-input v-model="queryData.merchantCode" placeholder="会员来源商户" style="width: 120px;" />
        </el-form-item>
        <el-form-item prop="mobile">
          <el-input v-model="queryData.mobile" placeholder="会员手机号" style="width: 120px;" />
        </el-form-item>
        <!-- <el-form-item>
          <span>会员状态：</span>
          <el-select v-model="queryData.status" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <span>会员等级：</span>
          <el-select v-model="queryData.status" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <span>开通时间：</span>
          <el-date-picker
            v-model="setUpTime"
            type="datetimerange"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            align="right"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain icon="el-icon-search" size="mini" @click="queryPageList">查询</el-button>
          <el-button type="info" icon="el-icon-refresh" size="mini" @click="reset('queryData')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main v-if="detailStatus">
      <el-table :data="pageTableData" border size="small" max-height="700">
        <el-table-column v-if="show" label="平台会员id" prop="id" header-align="center" align="center" width="65" />
        <el-table-column label="会员名称" prop="nickname" header-align="center" align="center" width="120" />
        <el-table-column label="邮箱" prop="email" header-align="center" align="center" width="80" />
        <el-table-column label="手机号" prop="mobile" header-align="center" align="center" width="120" />
        <el-table-column label="会员来源" prop="source" header-align="center" align="center" width="120" />
        <el-table-column label="平台积分" prop="score" header-align="center" align="center" width="80" />
        <el-table-column label="生日" prop="birthDate" header-align="center" align="center" width="80" />
        <!-- <el-table-column label="性别" prop="gender" header-align="center" align="center" width="65" >
        <template slot-scope="scope">
　　　　　　<span v-if="scope.row.gender=== 0">男</span>
　　　　　　<span v-if="scope.row.gender=== 1">女</span>
　　　　</template>
        </el-table-column>
        <el-table-column label="状态" prop="status" header-align="center" align="center" width="65">
          <template slot-scope="scope">
　　　　　　　<span v-if="scope.row.status=== 1">使用中</span>
　　　　　　　<span v-if="scope.row.status=== 2">已停用</span>
　　　　　</template>
        </el-table-column> -->
        <el-table-column label="开通时间" prop="createTime" header-align="center" align="center" width="160" />
        <!-- <el-table-column label="备注" prop="remark" header-align="center" align="center" width="80" /> -->
        <el-table-column label="操作" fixed="right" header-align="center" align="center" min-width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="queryCard(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer v-if="detailStatus" style="text-align: right">
      <el-pagination
        :current-page="queryData.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryData.totalCount"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
      />
    </el-footer>
    <div v-if="!detailStatus">
      <div>
        <el-row>
          <span>会员信息</span>
        </el-row>
        <el-table :data="memberDetailData" border size="small" max-height="700">
          <el-table-column label="会员卡号" prop="cardNo" header-align="center" align="center" width="120" />
          <el-table-column label="会员名称" prop="nickname" header-align="center" align="center" width="120" />
          <el-table-column label="手机号码" prop="mobile" header-align="center" align="center" width="120" />
          <el-table-column label="会员等级" prop="memberLevel" header-align="center" align="center" width="120" >
            <template slot-scope="scope">
　　　　　　　<span v-if="scope.row.memberLevel=== 1">普通</span>
　　　　　　　<span v-if="scope.row.memberLevel=== 2">黄金</span>
             <span v-if="scope.row.memberLevel=== 3">铂金</span>
　　　　　　　<span v-if="scope.row.memberLevel=== 4">钻石</span>
　　　　　   </template>
          </el-table-column>
          <el-table-column label="会员来源" prop="source" header-align="center" align="center" width="120" />
          <el-table-column label="生日" prop="birthDate" header-align="center" align="center" width="120" />

          <el-table-column label="性别" prop="gender" header-align="center" align="center" width="120" >
            <template slot-scope="scope">
　　　　　　　<span v-if="scope.row.gender=== 0">男</span>
　　　　　　　<span v-if="scope.row.gender=== 1">女</span>
　　　　　   </template>
          </el-table-column>
          <el-table-column label="开通时间" prop="createTime" header-align="center" align="center" width="120" />
          <el-table-column label="会员积分" prop="score" header-align="center" align="center" width="120" />
          <el-table-column label="会员状态" prop="status" header-align="center" align="center" width="120" >
            <template slot-scope="scope">
　　　　　　　<span v-if="scope.row.status=== 1">使用中</span>
　　　　　　　<span v-if="scope.row.status=== 2">已停用</span>
　　　　　   </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" header-align="center" align="center" width="120" />
        </el-table>
      </div>
      <div>
        <el-row>
          <span>储值/消费</span>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <span class="detail">储值余额：</span>
            <span>{{memberDetailObj.balance}}</span>
          </el-col>
          <el-col :span="6">
            <span />
            <span />
          </el-col>
          <el-col :span="6">
            <span />
            <span />
          </el-col>
          <el-col :span="6">
            <span />
            <span />
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <span class="detail">累计充值：</span>
            <span>{{memberDetailObj.rechargeCount}}</span>
            <span>次</span>
          </el-col>
          <el-col :span="6">
            <span>累计消费：</span>
            <span>{{memberDetailObj.resumeCount}}</span>
            <span>次</span>
          </el-col>
          <el-col :span="6">
            <span>累计充值优惠：</span>
            <span>{{memberDetailObj.rechargeDiscountAmt}}</span>
          </el-col>
          <el-col :span="6">
            <span>累计消费优惠：</span>
            <span>{{memberDetailObj.resumeDiscountTotal}}</span>
          </el-col>
        </el-row>
      </div>
      <div style="padding-top:20px">
        <el-tabs type="border-card" v-model="activeName">
          <el-tab-pane label="会员卡交易记录" name="trans">
            <el-table :data="transList" border size="small" max-height="700">
              <el-table-column label="时间" prop="orderTime" header-align="center" align="center" width="120" />
              <el-table-column label="类型" prop="type" header-align="center" align="center" width="120" >
                <template slot-scope="scope">
　　　　　　　　　　<span v-if="scope.row.type=== 1">用户充值</span>
　　　　　　　　　　<span v-if="scope.row.type=== 2">用户消费</span>
                  <span v-if="scope.row.type=== 3">平台充值</span>
　　　　　　　　　　<span v-if="scope.row.type=== 4">平台核销</span>
                  <span v-if="scope.row.type=== 5">退款</span>
　　　　　　　　</template>
              </el-table-column>
              <el-table-column label="金额" prop="amount" header-align="center" align="center" width="120" />
              <el-table-column label="当前余额" prop="currentBalance" header-align="center" align="center" width="120" />
              <el-table-column label="支付形式" prop="payType" header-align="center" align="center" width="120" >
                <template slot-scope="scope">
　　　　　　　　　　<span v-if="scope.row.payType=== 1">储值支付</span>
　　　　　　　　</template>
              </el-table-column>
              <el-table-column label="交易流水号" prop="orderNo" header-align="center" align="center" width="120" />
              <el-table-column label="交易门店" prop="shopeName" header-align="center" align="center" width="120" />
              <el-table-column label="操作人" prop="operateUser" header-align="center" align="center" width="120" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="积分变动记录" name="score">
            <el-table :data="scoreList" border size="small" max-height="700">
              <el-table-column label="时间" prop="orderTime" header-align="center" align="center" width="120" />
              <el-table-column label="类型" prop="type" header-align="center" align="center" width="120" >
                <template slot-scope="scope">
　　　　　　　　　　<span v-if="scope.row.type=== 1">充值</span>
　　　　　　　　　　<span v-if="scope.row.type=== 2">消费</span>
　　　　　　　　  </template>
              </el-table-column>
              <el-table-column label="积分" prop="score" header-align="center" align="center" width="120" />
              <el-table-column label="当前积分" prop="currentScore" header-align="center" align="center" width="180" />
              <el-table-column label="订单号" prop="orderNo" header-align="center" align="center" width="120" />
              <el-table-column label="交易门店" prop="shopName" header-align="center" align="center" width="120" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="会员开通记录" name="open">
            <el-table :data="openList" border size="small" max-height="700">
              <el-table-column label="序号" prop="id" header-align="center" align="center" width="120" />
              <el-table-column label="商户名称" prop="merchantName" header-align="center" align="center" width="120" />
              <el-table-column label="商户号码" prop="merchantCode" header-align="center" align="center" width="120" />
              <el-table-column label="会员名称" prop="nickname" header-align="center" align="center" width="120" />
              <el-table-column label="会员卡号" prop="cardNo" header-align="center" align="center" width="120" />
              <el-table-column label="手机号" prop="mobile" header-align="center" align="center" width="120" />
              <el-table-column label="会员卡余额" prop="balance" header-align="center" align="center" width="120" />
              <el-table-column label="生日" prop="birthDate" header-align="center" align="center" width="120" />
              <el-table-column label="性别" prop="gender" header-align="center" align="center" width="120" >
                <template slot-scope="scope">
　　　　　　　　　　<span v-if="scope.row.gender=== 0">男</span>
　　　　　　　　　　<span v-if="scope.row.gender=== 1">女</span>
　　　　　　　　  </template>
              </el-table-column>
              <el-table-column label="状态" prop="status" header-align="center" align="center" width="120" >
                <template slot-scope="scope">
　　　　　　　　　　<span v-if="scope.row.status=== 1">使用中</span>
　　　　　　　　　　<span v-if="scope.row.status=== 2">停用</span>
　　　　　　　　  </template>
              </el-table-column>
              <el-table-column label="注册门店" prop="shopName" header-align="center" align="center" width="120" />
              <el-table-column label="注册时间" prop="createTime" header-align="center" align="center" width="120" />
            </el-table>
          </el-tab-pane>
          <el-pagination
            style="text-align: right"
            :current-page="memberDetailReq.pageNum"
            :page-sizes="[10]"
            :page-size="memberDetailReq.pageSize"
            layout="prev, pager, next"
            :total="memberDetailReq.totalCount"
            @size-change="memberPageSizeChange"
            @current-change="memberPageCurrentChange"
          />
        </el-tabs>
      </div>
      <el-button type="primary" @click="returnCardList">返回会员列表</el-button>
    </div>
  </el-container>
</template>

<script>
// import datePicker from '@/components/model/component/date-picker/startEndTime.vue'
import { memberAjax } from 'Ajax'
export default {
  name: 'MemberList',
  data() {
    return {
      detailStatus: true,
      show: false,
      formLabelWidth: '120px',
      memberFormVisible: false,
      fullCardFormVisible: false,
      verificationCardFormVisible: false,
      fullCardForm: {
        amount: 1,
        region: 'shanghai',
        password: '123456'
      },
      verificationCardForm: {
        amount: 1,
        region: 'shanghai',
        password: '123456'
      },
      memberForm: {
        nickname: 'test',
        cardNo: '1234567',
        mobile: '1234567890',
        balance: 1234567,
        score: '123456',
        birthDate: '19890809',
        gender: 0,
        status: 1,
        createTime: '2021-04-10 23:11:55',
        remark: '重要客户'
      },
      queryData: {
        nickname: '', // 会员名称
        merchantCode: '', // 会员卡号
        mobile: '', // 会员手机号
        status: '0',
        startTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 10,
        totalCount: 11
      },
      memberDetailData: [{
        balance: 12345,//会员卡余额(分)
        birthDate: '2020-10-15',
        cardNo: '1234567',
        nickname: 'test5',
        mobile: '1234567890',
        remark: '积极肯定就',
        score: 50000,
        status: 1,
        gender: 0,
        createTime: '2020-10-15 16:22:58',
      }],
      pageTableData: [],
      genderOptions: [
        {
          value: 0,
          label: '男'
        },
        {
          value: 1,
          label: '女'
        },
      ],
      options: [
        {
          value: '0',
          label: '全部'
        },
        {
          value: '1',
          label: '审核通过'
        },
        {
          value: '2',
          label: '待审核'
        },
        {
          value: '3',
          label: '上游审核中'
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '近7天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      setUpTime: [],
      //会员详情相关参数
      activeName: 'trans',
      memberDetailObj:{
        memberDetail:[],
        balance: 234,//储值余额
        rechargeAmt: 1234,
        rechargeCount: 2,
        resumeAmt: 456,
        resumeCount: 3,
        rechargeDiscountTotal: 1234,
        resumeDiscountTotal: 123,
        resumeDiscount: '0',
        rechargeDiscount: '0'
      },
      memberDetailReq:{
        id: 123,
        pageNum: 1,
        pageSize: 10,
        totalCount: 0
      },
      scoreList:[
        {
          orderTime: '2021-04-17 19:49:00',
          currentScore: 23456,
          score: 1234567,
          type: 1,
          shopName: 'test23',
          orderNo: '23456789'
        }
      ],
      transList:[
        {
          orderTime: '2021-04-17 19:49:00',
          currentBalance: 23456,
          amount: 1234567,
          type: 5,
          payType: 1,
          shopeName: 'test23',
          orderNo: '23456789',
          operateUser: '测试'
        }
      ],
      openList:[
        {
          id: 0,
          merchantName: 'test1',
          merchantCode: '2345',
          nickname: '678',
          cardNo: '345678',
          mobile: '1234567890',
          balance:4567,
          birthDate: '2020-11-15',
          gendar: 0,
          status: 0,
          shopName: 'test23',
          createTime: '2021-04-17 19:49:00',
        }
      ]
    }
  },
  methods: {
    returnCardList(){
      this.detailStatus = true
    },
    queryCard(row) {
      this.detailStatus = false
      memberAjax.memberDetailList({'id':row.id}).then(res =>{
        this.memberDetailObj = res
        this.memberDetailData = res.memberDetail
        // this.memberDetail.resumeDiscount = res.resumeAmt + '/' +res.resumeCount
        // this.memberDetail.rechargeDiscount = res.rechargeAmt + '/' +res.rechargeCount
      })
      this.queryTrans()
      this.queryScore()
      this.queryOpen()
    },
    queryTrans(){
      memberAjax.memberTransList(this.memberDetailReq).then(res =>{
        this.transList = res.list
        this.memberDetailReq.totalCount = res.totalCount
      })
    },
    queryScore(){
      memberAjax.memberScoreList(this.memberDetailReq).then(res =>{
        this.scoreList = res.list
        this.memberDetailReq.totalCount = res.totalCount
      })
    },
    queryOpen(){
       memberAjax.memberOpenList(this.memberDetailReq).then(res =>{
        this.openList = res.list
        this.memberDetailReq.totalCount = res.totalCount
      })
    },
    memberPageSizeChange(val) {
      this.memberDetailReq.pageSize = val
      if(this.activeName === 'trans'){
        this.queryTrans()
      }
      if(this.activeName === 'score'){
        this.queryScore()
      }
      if(this.activeName === 'open'){
        this.queryOpen()
      }
    },
    memberPageCurrentChange(val) {
      this.memberDetailReq.pageNum = val
      if(this.activeName === 'trans'){
        this.queryTrans()
      }
      if(this.activeName === 'score'){
        this.queryScore()
      }
      if(this.activeName === 'open'){
        this.queryOpen()
      }
    },

    pageSizeChange(val) {
      this.queryData.pageSize = val
      this.queryPageList()
    },
    pageCurrentChange(val) {
      this.queryData.pageNum = val
      this.queryPageList()
    },
    queryPageList() {
      if (this.setUpTime && this.setUpTime.length>0) {
        this.queryData.startTime = this.setUpTime[0].toLocaleString()
        this.queryData.endTime = this.setUpTime[1].toLocaleString()
      }else{
        this.queryData.startTime = ''
        this.queryData.endTime = ''
      }
      memberAjax.memberList(this.queryData).then(res =>{
        this.pageTableData = res.list
        this.queryData.totalCount = res.totalCount
      })
    },
    reset(formName) {
      this.$refs[formName].resetFields();
      this.queryData.status = '0'
      this.setUpTime = []
    }
  }
}
</script>

<style scoped>
.detail{
  padding-left: 20px;
}
.el-row{
  padding-top: 10px;
}
</style>
